<template>

    <el-drawer v-model="props.visible" size="50%" title="产品类型工序详情" direction="rtl" :before-close="handleClose">
        <el-card shadow="never">
            <template #header>
                <el-button @click="addSingleVisible = true" type="success" icon="Plus">新增</el-button>
            </template>

            <el-table ref="multipleTableRef" v-loading="loading" :data="workingProcedureList" stripe>
                <el-table-column label="对应类型" prop="orderType" align="center">
                    <template #default="scope">
                        <span>
                            {{ customized_order_type.filter((item: any) => item.value ==
                                scope.row.orderType)[0]?.label }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column label="工序名称" prop="workProcedureId" align="center">
                    <template #default="scope">
                        <span>
                            {{ allList.filter((item: any) => item.id ==
                                scope.row.workProcedureId)[0]?.workName }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column label="工序排序" prop="sort" align="center"></el-table-column>
                <el-table-column label="默认选择" prop="defaultFlag" align="center">
                    <template #default="scope">
                        {{ scope.row.defaultFlag === '1' ? '是' : '否' }}
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" width="120px">
                    <template #default="scope">
                        <el-tooltip content="修改">
                            <el-button @click="modifyList(scope.row)" link :style="{ fontSize: '15px' }" type="primary"
                                icon="EditPen"></el-button>
                        </el-tooltip>
                        <el-tooltip content="删除">
                            <el-button @click="deleteList(scope.row)" link :style="{ fontSize: '15px' }" type="danger"
                                icon="Delete"></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>

            </el-table>
            <!-- <pagination v-if="totalData > 0" :total="totalData" v-model:page="queryParams.pageNum"
                v-model:limit="queryParams.pageSize" @pagination="getWorkingProcedureList" /> -->
        </el-card>

        <template #footer>
            <div class="dialog-footer">
                <el-button @click="handleClose">关 闭</el-button>
            </div>
        </template>
    </el-drawer>
    <!-- <el-dialog v-model="props.visible" title="产品类型工序详情" :close-on-click-modal="false" align-center width="40%"
        @close="handleClose">
        
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="handleClose">关 闭</el-button>
            </div>
        </template>
    </el-dialog> -->


    <AddProcess :visible="addSingleVisible" :ids="props.ids" :allList="allList" :initList="addSingleObj" @submit="handleAddSubmit"
        @close="handleAddClose" />
</template>

<script setup lang="ts">
import { getWorkingProcedureListApi, getAllWorkingProcedureListApi, deleteWorkingProcedureApi } from '@/api/sj/productManagement/finalDraft';
import AddProcess from './addProcess.vue'

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { customized_order_type } = toRefs<any>(proxy?.useDict('customized_order_type'));

const props = defineProps(['visible', 'ids']);
const emits = defineEmits(['close']);

const allList = ref<any>([]);


watch(() => props.visible, async (newValue) => {
    if(newValue) {
        getWorkingProcedureList();
        getAllList();
    }
}, { deep: true });

const loading = ref(false);
const totalData = ref(0);
const queryParams = ref<any>({
    pageNum: 1,
    pageSize: 10
});

const workingProcedureList = ref<any>([]);
const addSingleVisible = ref(false); // 添加工序弹窗 key
const addSingleObj = ref<any>({}); // 回显的

const getWorkingProcedureList = async () => {
    loading.value = true;
    try {
        const { code, data, total } = await getWorkingProcedureListApi({
            id: props.ids,
            ...queryParams.value
        });
        if (code == 200) {
            workingProcedureList.value = data;
            totalData.value = total;
            loading.value = false;
        };
    } catch (error) {
        loading.value = false;
    }
};

/** 修改类型工序 */
const modifyList = (row: any) => {
    addSingleObj.value = row;
    addSingleVisible.value = true;
};

/** 删除类型工序 */
const deleteList = async (row: any) => {
    ElMessageBox.confirm('确定删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then( async () => {
        try {
            const {code} = await deleteWorkingProcedureApi(row.id)
            if(code == 200){
                proxy?.$modal.msgSuccess('删除成功');
                getWorkingProcedureList()
            }
        } catch (error) {
            
        }
    })
};

/** 查询所有工序 */
const getAllList = async () => {
    try {
        const { code, data, } = await getAllWorkingProcedureListApi();

        if (code == 200) {
            allList.value = data;
        }
    } catch (error) {

    }
}


const handleAddSubmit = async (e: any) => {
    getWorkingProcedureList();
};

const handleAddClose = () => {
    addSingleVisible.value = false;
};

const handleClose = () => {
    emits('close');
};

</script>

<style lang="scss" scoped>
.el-select {
    width: 100%;
}
</style>